<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <title>Document</title>
</head>
<body>
    <div id="logo-box">

        <h2>Login</h2>

        <form action="">

            <div id="user">
                <input type="text" name="" required="">
                <label>Username</label>
            </div>

            <div id="user">
                <input type="text" id="mi" name="" required="">
                <label>Password</label>
            </div>
            <div class="mima clearfix">
				<div class="wd" id="ruo"></div>
				<div class="wd" id="zhong"></div>
				<div class="wd" id="gao"></div>
				
			</div>
            
            <a href="#" id="a1">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                Submit
            </a>
             <a href="#" id="a2">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                Abolish
            </a>
        </form>
    </div>
    
    <script>
		var ruo = document.getElementById("ruo");
		ruo.hidden = true;
		var zhong = document.getElementById("zhong");
		zhong.hidden = true;
		var gao = document.getElementById("gao");
		gao.hidden = true;
		var mi = document.getElementById("mi");
		var val = mi.value;
		mi.onkeypress = function(e) {
			if(this.value.length>=0&&this.value.length<5) {
				ruo.hidden = false;
			}else if(this.value.length>=5&&this.value.length<10) {
				zhong.hidden = false;
			}
			else{
				gao.hidden = false;
			}
		}
	</script>
</body>
</html>